<template>
  <div class="order-list">
    <Pane class="order-list-card">
      <span slot="title" class="card-title">订单管理</span>
      <section slot="content">
        <!-- 搜索 -->
        <el-form :model="searchForm" size="small">
          <!-- 订单号 -->
          <el-form-item label="订单号">
            <el-input v-model="searchForm.orderNo"></el-input>
          </el-form-item>

          <!-- 收获人 -->
          <el-form-item label="收获人">
            <el-input v-model="searchForm.consignee"></el-input>
          </el-form-item>

          <!-- 手机号 -->
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone"></el-input>
          </el-form-item>

          <!-- 订单管理 -->
          <el-form-item label="订单管理">
            <!-- <el-input v-model="searchForm.orderState"></el-input> -->
            <el-select v-model="searchForm.orderState">
              <el-option value="派送中">派送中</el-option>
              <el-option value="已完成">已完成</el-option>
              <el-option value="已受理">已受理</el-option>
            </el-select>
          </el-form-item>

          <!-- 选择时间 -->
          <el-form-item label="选择时间">
            <el-date-picker
              value-format="yyyy-mm-dd HH:MM:SS"
              v-model="searchForm.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <!-- 按钮 -->
          <el-form-item>
            <el-button type="parmary" size="small" @click="search">查询</el-button>
            <el-button type="success" size="small" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableDate">
          <el-table-column fixed prop="orderNo" label="订单号" width="100"></el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="130"></el-table-column>
          <el-table-column prop="consignee" label="收货人" width="130"></el-table-column>
          <el-table-column prop="deliverAddress" label="配送地址" width="130"></el-table-column>
          <el-table-column prop="deliveryTime" label="配送时间" width="180"></el-table-column>
          <el-table-column prop="remarks" label="用户备注" width="130"></el-table-column>
          <el-table-column prop="orderAmount" label="订单金额" width="130"></el-table-column>
          <el-table-column prop="orderState" label="订单状态" width="100"></el-table-column>
          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="showTable(scope.row)">查看</el-button>
              <el-button type="text" @click="handerEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <span>这是一段信息</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>-->

        <my-dialog
          width="500"
          @handle-close="dialogVisible = false"
          title="自定义标题"
          :visible="dialogVisible"
        >
          <List :data="listData">
            <list-item slot-scope="scope">{{scope.row.title}}</list-item>
          </List>

          <!-- 插入尾部 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="saveEdit" size="mini">确 定</el-button>
          </span>
        </my-dialog>
      </section>
    </Pane>
  </div>
</template>

<script>
// 引入el-card
import Pane from "@/components/Pane/Pane";
// 引入自己封装的dialog
import MyDialog from "@/components/MyDialog/MyDialog";
// 引入自己封装的List
import List from "@/components/List/List";
// 引入自己封装的ListItem
import ListItem from "@/components/List/ListItem";

import local from "@/utils/local";

import { getOrderList, getOrderDetail } from "@/api/order";
// 时间日期处理工具
import moment from "moment";
export default {
  // 注册组件
  components: {
    Pane,
    MyDialog,
    List,
    ListItem,
  },
  // 初始化数据
  data() {
    return {
      // 🔍搜索表单
      searchForm: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      },
      // 表格的数据源
      tableDate: [
        {
          id: 3,
          orderNo: "11014",
          orderTime: "2020-04-08T02:44:49.000Z",
          phone: "18181358998",
          consignee: "赵子龙",
          deliverAddress: "天府新谷3",
          deliveryTime: "2020-04-23T02:44:47.000Z",
          remarks: "微辣",
          orderAmount: 99.88,
          orderState: "已完成",
        },
        {
          id: 14,
          orderNo: "14014",
          orderTime: "2020-04-06T10:24:57.000Z",
          phone: "18181358998",
          consignee: "小王",
          deliverAddress: "天府新谷",
          deliveryTime: "0000-00-00 00:00:00",
          remarks: "微辣",
          orderAmount: 59.88,
          orderState: "已受理",
        },
      ],
      // 分页
      currentPage: 1, // 当前页
      pageSize: 7, // 当前条数
      total: 28, // 总页数

      // dia
      dialogVisible: false,
      // 测试myDialog的数据来源
      listData: [
        {
          title: "测试测试",
        },
      ],
    };
  },
  created() {
    this.init();
  },
  // 事件
  methods: {
    async init() {
      let { total, data } = await getOrderList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        orderNo: this.searchForm.orderNo,
        consignee: this.searchForm.consignee,
        phone: this.searchForm.phone,
        orderState: this.searchForm.orderState,
        date:
          this.searchForm.date == null
            ? JSON.stringify([])
            : JSON.stringify(this.searchForm.date),
      });
      // 处理时间
      data.forEach(function (v) {
        v.orderTime = moment(v.orderTime).format("YYYY-MM-DD HH:MM:SSS");
        v.deliveryTime = moment(v.deliveryTime).format("YYYY-MM-DD HH:MM:SSS");
      });
      console.log(total);
      console.log(data);
      this.total = total;
      this.tableDate = data;
    },
    handerEdit(row) {
      console.log(row);
      this.$router.push("/order/order-edit");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 当前页码改变
    handleCurrentChange(page) {
      this.currentPage = page;
      this.init();
    },
    // 查询
    search() {
      this.init();
    },
    // 重置
    reset() {
      this.searchForm = {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      };
    },
    // mydialog --footer--btn
    saveEdit() {
      this.dialogVisible = false;
    },
    showTable(row) {
      this.dialogVisible = true;
      console.log(row);
      // local.set("rowTable", row);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
.order-list {
  /deep/ .el-card__body {
    height: 700px;
  }
  .card-title {
    font-size: @fontSize-20;
    .font-weight-500;
  }
  .el-form {
    .flex;
    .flex-wrap;

    .el-form-item {
      .flex;
      margin-right: @m-r-50;
    }
  }
  .el-pagination {
    margin-top: 30px;
  }
}
</style>
